<!-- 充值 -->
<template>
  <view class="container">
    <picker mode="selector" :range="marketArr" range-key="name" @change="changePicker"
        class="picker-box">
    <view class="head flex">
        <view class="flex">
          <view class="img"> <image src="/static/home/bian@2x.png" class="icon" mode=""></image> </view>
          <text class="market-name">{{market}}</text>
        </view>
        
        <u-icon name="arrow-down" class="arrow" size="22" color="#E4E4E4"></u-icon>
    </view>
    </picker>

    <!-- 策略 -->
    <view class="charge-time">
      <view class="item brown">
        <view class="time"></view>
        <view class="name">
          AI金字塔
          </view>
        <view class="desc">低买高卖</view>
      </view>
      <view class="item brown">
        <view class="time"></view>
        <view class="name">
          智能高频
          </view>
        <view class="desc">低买高卖</view>
      </view>
      <view class="item selected brown">
        <view class="time"></view>
        <view class="name">
          现货网络
          </view>
        <view class="desc">低买高卖</view>
      </view>
    </view>

    <!-- 支付方式 -->
    <view class="pay-text">支付方式</view>
    <view class="pay flex">
      <text>USDT转账</text>
      <view class="btn flex">
        <view class="out"></view>
        <view class="in"></view>
      </view>
    </view>

    <!-- 开通时间 -->
			<view class="charge-time">
				<view class="item white">
					<view class="t">1个月</view>
					<view class="c">
						70
						<text>USDT</text>
						</view>
					<view class="b">折合2.33USDT/天</view>
				</view>
				<view class="item white">
					<view class="t">1个月</view>
					<view class="c">
						70
						<text>USDT</text>
						</view>
					<view class="b">折合2.33USDT/天</view>
				</view>
				<view class="item select white">
					<view class="t">1个月</view>
					<view class="c">
						70
						<text>USDT</text>
						</view>
					<view class="b">折合2.33USDT/天</view>
				</view>
			</view>

      <view class="kefu" @click="showKefu = true"></view>

      <view class="btn2" >
        <u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle" @click="showCharge = true">确认开通并支付</u-button>
      </view>

      <u-popup v-model="showCharge" mode="bottom" border-radius="14" length="60%" closeable>
        <view class="content flex-c">
          <view class="line flex">
            <text class="l">充值:</text>
            <view class="r flex-s">70USDT</view>
          </view>
          <view class="line flex">
            <text>充值地址：</text>
            <text class="r flex-s">dasbchdjsbviuhhsdBKJDSBCX</text>
          </view>
          <view class="line flex">
            <text>充值须知：</text>
            <text class="r  flex-s">如出现支付成功但话费未到账情况，系
统每30分钟会补缴一次，您可在次日
11点之前查看补缴到账情况，同时补缴
成功后订单状态会自动更新。</text>
          </view>
          
        </view>
        <u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle" @click="confirmCharge">确认</u-button>
      </u-popup>

      <kefu-popup :showKefu="showKefu" @closePopup="closePopup"></kefu-popup>
  </view>
</template>

<script>
import {
		fakePosition,
	} from "@/api/mock/home.js";
  import kefuPopup from '@/components/kefu-popup/index'
export default {
  data () {
    return {
      showKefu: false,
      market: '',
      marketArr: [],
      customStyle:{
        color:'#fff',
        width: '686rpx',
        height: '90rpx',
        backgroundColor:'#1488FF'
      },
      showCharge:false
    };
  },

  components: {
    kefuPopup
  },

  computed: {},

  mounted() {
    fakePosition().then(data => {
				this.market = data.position;
				this.marketArr = data.positionArr;
			});
  },

  methods: {
    changePicker(e) {
      this.market = this.marketArr[e.detail.value];
    },
 
    closePopup(c){
				this.showKefu = c
				console.log('closePopup', this.showKefu)
			},
      confirmCharge(){
        thius.showCharge=false
      }
    
  }
}

</script>
<style lang='scss' scoped>
.container {
  min-height: 100vh;
  background-color: $b;
  padding: $p;
  .head {
    display: flex;
    width: $w;
    height: 72rpx;
    background: #FFFFFF;
    border-radius: 36px;
    padding: 0 30rpx;
  
    .market-name{
      margin: 0 20rpx 0 10rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .icon{
      width: 32rpx;
      height: 32rpx;
    }
  }

  // 充值时间
  .charge-time {
    display: flex;
    min-width: $w;
    margin: 20rpx auto;
    justify-content: space-between;
    flex-wrap:wrap;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      // border: 4rpx solid #2e3136;
      // box-shadow: 1rpx 2rpx 4rpx #2e3136;
      min-width: 220rpx;
      min-height: 220rpx;
      margin-right: 8rpx;
      
      border-radius: 20rpx;
      &.brown{
        color: #fff;
        background: linear-gradient(0deg, #C4A16D 0%, #F6DAB0 100%);
      }
      &.white{
        color: #333333;
        background-color: #fff;
      }
      &.selected {
        background-color: #303134;
      }
      .time {
        margin-top: 30rpx;
      }
      .name {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
      }
      .money {
        font-size: 50rpx;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text {
          font-size: 30rpx;
        }
      }
      .desc {
        margin-bottom: 30rpx;
        padding: 8rpx 15rpx;
        border: 2rpx solid #fff;
        border-radius: 26rpx;
      }
      .t{
        margin-top: 30rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .c {
        font-size: 44rpx;
        font-family: DINPro;
        font-weight: bold;
        color: #333333;
      }
      .b {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #444;
      }
      &.select{
        color: #168AFF;
      }
    }
  }

  // 支付方式
  .pay-text{
    margin-top: 20rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .pay {
    width: $w;
    height: 90rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 20rpx 26rpx;
    text{
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .btn{
      .out {
        background-color:#fff;
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        z-index: 999;
        margin-right:-20rpx;
      }
      .in{
        background-color:#1488FF;
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        z-index: 1;
      }
    }
}
  .kefu {
    position:absolute;
    right: 20rpx;
    bottom: 250rpx;
    width: 116rpx;
    height: 116rpx;
    border-radius: 50%;
    background-image: url('/static/me/asset/wode_chongzhi_kefu@2x.png');
    background-size: cover;
  }
  .btn2 {
    width: $w;
    position:absolute;
    right: 20rpx;
    bottom: 100rpx;
  }
}

.content {
  padding: 50rpx 30rpx;
  margin-bottom: 80rpx;
  .line {
    margin: 20rpx;
    min-height: 40rpx;
    .l {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    .r {
      padding: 10rpx;
      min-width: 480rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      background: #F4F6F8;
      border-radius: 12rpx;
    }
  }
}
</style>